<template>
    <div>
        <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
            <div class="tableText">客户标签</div>
        </div>
        <div class="bgBox">
            <div style="padding-bottom: 1rem;">
                <div v-for="(item, index) in customerTagOpt" :key="index" class="tagLine">
                    <div class="tagClass">
                        {{item.name}}
                    </div>
                    <div 
                        v-for="(ele, indicator) in item.systemTags" 
                        :key='indicator'
                        class="tagCan"
                    >
                        <div
                            class="tag"
                            :style="`background: ${ele.checked === 1 ? (item.activeColor || '#7E6B5A') : (item.inactiveColor || '#E9E9E9')}; color: ${ele.checked === 1 ? '#FFF' : '#222222'}`"
                            @click="clickTag(index, indicator)"
                        >
                            {{ele.name}}
                        </div>
                        <div style="width: 15rem;" v-if="hasScore" v-show="ele.checked === 1">
                            <el-slider
                                :key="indicator"
                                v-model="ele.score"
                                :step="1"
                                :max="10"
                                show-stops
                            />
                        </div>
                    </div>
                </div>
                <div class="customTag"> 
                    <input class="tagInput" @keydown="handleType" v-model="customTagName" placeholder="自定义标签，回车确定" />
                    <div 
                        v-for="(item, index) in customTags.systemTags" 
                        :key="index" 
                        style="display: flex;height:3rem;align-items: center;"
                    >
                        <div class="tag" :style="`background: ${item.activeColor || '#7E6B5A'}; color: #FFF`">
                            {{item.name}}
                            <div class="closeBtn" @click="delTag(index)">×</div>
                        </div>
                        <div style="width: 20rem;" v-if="hasScore">
                            <el-slider
                                v-model="item.score"
                                :step="1"
                                :max="10"
                                :show-stops="true"
                                :show-tooltip="true"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import datas from './datas.js'
import { getTagsInfo } from './axios.js'
import deepCopy from '@/utils/deepCopy.js'
export default {
    data() {
        return {
            customTagName: '',
            customTags: {},
            // 客户标签
            customerTagOpt:'',
            //customerTagOpt: datas.customerTagOpt,
            rowData: '',
            clearData: '',
            //score: 0
        }
    },
    props: {
        title: {
            type: String
        },
        hasScore: {
            required: false
        },
        pageType:{
            type: String
        }
    },
    mounted() {
        this.requireTags();
    },
    methods: {
        // 获取标签
        requireTags() {
            !Array.isArray(this.customTags.systemTags) && getTagsInfo().then(res => {
                if(res.status === 200) {
                    this.rowData = res.data.result
                    let groups = res.data.result.systemTagGroups;
                    this.customTags = groups.splice(groups.length - 1, 1)[0]
                    this.customerTagOpt = groups
                }
            });
        },
        clearInput() {
            getTagsInfo().then(res => {
                if(res.status === 200) {
                    this.rowData = res.data.result
                    let groups = res.data.result.systemTagGroups;
                    this.customTags = groups.splice(groups.length - 1, 1)[0]
                    this.customerTagOpt = groups
                }
            });
        },
        handleType(e) {
            if(e.keyCode === 13) {
                this.customTagName && this.customTags.systemTags.push({
                    name: this.customTagName,
                    createBy: -1,
                    checked: 1,
                    systemTagCategoryId: 1,
                    systemTagGroupId: 4
                    // score: ''
                });
                this.customTagName = ''
            }
        },
        // 删除
        delTag(index) {
            this.customTags.systemTags.splice(index, 1);
            this.getResult();
        },
        // 点击
        clickTag(index, indicator) {
            let temp = [...this.customerTagOpt];
            temp[index].systemTags[indicator].checked === 1
            ?
            temp[index].systemTags[indicator].checked = 0
            :
            temp[index].systemTags[indicator].checked = 1

            this.customerTagOpt = temp;
        },
        // 编辑时勾选
        dispatchData(data) {
            this.rowData = data.systemTagCategoryVO;
            let groups = data.systemTagCategoryVO.systemTagGroups;
            this.customTags = groups.splice(groups.length - 1, 1)[0]
            this.customerTagOpt = groups
        },
        // 获取结果
        getResult() {
            this.rowData && (this.rowData.systemTagGroups = [...this.customerTagOpt, this.customTags])
            let pass = true;
            this.customerTagOpt.map(item => {
                let flag = false
                item.systemTags.map(ele => {
                    ele.checked == 1 && (flag = true)
                })
                !flag && (pass = false)
            })
            !pass && this.$message({
                message: '勾选客户标签',
                type: 'warning'
            })
            return pass ? this.rowData : pass
        }
    },
}

</script>
<style scoped>
    .title{
        color: #827060;
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 1rem;
    }
    .tagLine{
        display: flex;
        margin-bottom: 1rem;
    }
    .tagClass{
        font-size: 1.5rem;
        font-weight: bold;
        color: #888888;
        height: 3rem;
        line-height: 3rem;
        padding: 0 2rem 0 0;
    }
    .tagClass img{
        vertical-align: middle;
    }
    .tag{
        /* width: 5rem; */
        height: 3rem;
        line-height: 3rem;
        padding: 0 2rem;
        border-radius: .4rem;
        background: cyan;
        margin-right: 1rem;
        font-size: 1.4rem;
        position: relative;
        cursor: pointer;
    }
    .tagCan{
        display: flex;
        margin-right: 1rem;
    }
    .customTag{
        display: flex;
        margin-top: 1.5rem;
        flex-wrap: wrap;
    }
    .tagInput{
        width: 20rem;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        height: 3.2rem;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        margin-right: 2rem;
        margin-bottom: .8rem;
    }
    .scoreInput{
        width: 13rem;
        height: 3rem;
        border: 1px solid #dcdfe6;
        border-radius: .3rem;
        margin-right: 1rem;
        padding: 0 15px;
        outline: none;
    }
    .closeBtn{
        position: absolute;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 2.2rem;
        right: 0.2rem;
        top: 0.2rem;
    }
    .closeBtn:hover{
        color: red;
    }
    .bgBox{
        background: #FFF;
        padding: 0 2.4rem;
    }
    .tableTitle{
        height: 4rem;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        background: #FFF;
    }
    .tableIcon{
        width: .4rem;
        margin-left: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tableText{
        height: 100%;
        line-height: 4rem;
        margin-left: 0.4rem;
        font-size: 14px;
        font-weight: bold;
        color: #715D4A;
    }
</style>
